<template>

  <div class="page_main">
    <div class="left_box">
      <div class="box_title">资源列表</div>
      <div class="assets_box">
        <div class="assets_list">名称</div>
        <div class="assets_list">IP</div>
        <div class="assets_list">状态</div>
        <div class="assets_list">所属平台</div>
        <div class="assets_list">主机类型</div>
        <div class="assets_list">所属项目</div>
        <div class="assets_list">所属分组</div>
      </div>
      <div class="swiper_box">
        <div class="swiper-wrapper">
          <div class="info_box swiper-slide" v-for="(item, index) in pageResult.resourcePool" :key="index" :a="item">
            <div class="info_list">{{ item.name }}</div>
            <div class="info_list">{{ item.ip }}</div>
            <div class="info_list warn" :style="{ color: item.state === '运行中' ? '#12D633' : '#FF0000' }">{{ item.state
              }}</div>
            <div class="info_list">{{ item.platform }}</div>
            <div class="info_list">{{ item.type }}</div>
            <div class="info_list">{{ item.project }}</div>
            <div class="info_list">{{ item.owngroup }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="center_box">
      <div class="use_rate_box">
        <div ref="charts1" class="use_charts"></div>
        <div ref="charts2" class="use_charts"></div>
      </div>
      <div class="circle_box">
        <div class="circle_item">
          <div ref="charts3" class="circle"></div>
          <div class="value">设备在线率</div>
        </div>
        <div class="circle_item">
          <div ref="charts4" class="circle"></div>
          <div class="value">设备健康率</div>
        </div>
        <div class="circle_item">
          <div ref="charts5" class="circle"></div>
          <div class="value">链路连通率</div>
        </div>
      </div>
      <div class="assets_use_box">
        <div class="box_title">资源利用率</div>
        <div class="info_box">
          <div class="info">
            <div class="label">总任务量</div>
            <div class="value">
              {{ pageResult.useratio.task }}
              <div class="rate">{{ pageResult.useratio.taskRatio }}</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="info">
            <div class="label">前增量</div>
            <div class="value">{{ pageResult.useratio.taskIncrement }}</div>
          </div>
        </div>
        <div class="config_box">
          <div class="config_list">
            <div class="list">
              <div class="icon"></div>
              <div class="label">CPU利用率：{{ pageResult.useratio.cpuUse }}</div>
              <div class="value">{{ pageResult.useratio.cpuUseRatio }}</div>
            </div>
            <div class="list">
              <div class="icon"></div>
              <div class="label">CPU温度：{{ pageResult.useratio.cpuTemp }}</div>
              <div class="value">{{ pageResult.useratio.cpuTempRatio }}</div>
            </div>
            <div class="list">
              <div class="icon"></div>
              <div class="label">CPU负载率：{{ pageResult.useratio.cpuLoad }}</div>
              <div class="value">{{ pageResult.useratio.cpuLoadRatio }}</div>
            </div>
            <div class="list">
              <div class="icon"></div>
              <div class="label">CPU运行总功率：{{ pageResult.useratio.cpuPower }}</div>
              <div class="value warn">{{ pageResult.useratio.cpuPowerRatio }}</div>
            </div>
          </div>
          <div class="config_list">
            <div class="list">
              <div class="icon"></div>
              <div class="label">内存使用率：{{ pageResult.useratio.ramUse }}</div>
              <div class="value">{{ pageResult.useratio.ramUseRatio }}</div>
            </div>
            <div class="list">
              <div class="icon"></div>
              <div class="label">读速率：{{ pageResult.useratio.readSpeed }}</div>
              <div class="value">{{ pageResult.useratio.readRatio }}</div>
            </div>
            <div class="list">
              <div class="icon"></div>
              <div class="label">写速率：{{ pageResult.useratio.writeSpeed }}</div>
              <div class="value">{{ pageResult.useratio.writeRatio }}</div>
            </div>
            <div class="list">
              <div class="icon"></div>
              <div class="label">资源故障率：{{ pageResult.useratio.faultUse }}</div>
              <div class="value warn">{{ pageResult.useratio.faultUseRatio }}</div>
            </div>
          </div>
        </div>
        <div ref="charts6" class="charts"></div>
      </div>
    </div>
    <div class="right_box">
      <div class="ranking_box">
        <div class="rank_list l">
          <div class="box_title">CPU使用率TOP10</div>
          <div class="rank_swiper rank_one">
            <div class="swiper-wrapper">
              <div class="list swiper-slide" v-for="(item, index) in cpuTop" :key="index" :a="item">
                <div class="label">{{ item.name }}</div>
                <div class="value">
                  <div :class="'progess ' + 'c' + (index % 11)" :style="'width:' + item.value + ';'"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rank_list r">
          <div class="box_title">内存使用率TOP10</div>
          <div class="rank_swiper rank_two">
            <div class="swiper-wrapper">
              <div class="list swiper-slide" v-for="(item, index) in ramTop" :key="index" :a="item">
                <div class="label">{{ item.name }}</div>
                <div class="value">
                  <div :class="'progess ' + 'c' + (index % 11)" :style="'width:' + item.value + ';'"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="real_warn_box">
        <div class="box_title">资源列表</div>
        <div class="warn_box">
          <div class="warn_list">名称</div>
          <div class="warn_list">IP</div>
          <div class="warn_list">状态</div>
          <div class="warn_list">所属平台</div>
          <div class="warn_list">主机类型</div>
          <div class="warn_list">指标名称</div>
          <div class="warn_list">是否异常</div>
        </div>

        <div class="warn_info_box">
          <div class="swiper-wrapper">
            <div class="info_box swiper-slide" v-for="(item, index) in pageResult.altermsg" :key="index" :a="item">
              <div class="info_list">{{ item.name }}</div>
              <div class="info_list">{{ item.ip }}</div>
              <div class="info_list warn">{{ item.state }}</div>
              <div class="info_list">{{ item.platform }}</div>
              <div class="info_list">{{ item.type }}</div>
              <div class="info_list">{{ item.indexName }}</div>
              <div class="info_list">{{ item.exception }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper' // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
import * as echarts from 'echarts';
import api from "@/utils/api/index.js";

export default {
  name: 'InCloudOs',

  data() {
    return {
      timer: null,
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myChart5: null,
      myChart6: null,
      pageResult: {
        altermsg: [],
        useratio: {
          cpuUse: 0,
          cpuUseRatio: '0%',
          cpuUseState: 0,

          cpuTemp: 0,
          cpuTempRatio: '0%',
          cpuTempState: 0,
          cpuLoad: 0,
          cpuLoadRatio: '0%',
          cpuPower: 0,
          cpuPowerRatio: '0%',
          ramUse: 0,
          ramUseRatio: '0%',
          readSpeed: 0,
          readRatio: '0%',
          writeSpeed: 0,
          writeRatio: '0%',
          faultUse: 0,
          faultUseRatio: '0%',
          taskIncrement: 0,
          task: 0,
          taskRatio: '0%'

        }
      },
      cpuTop: [],
      ramTop: [],
      warn_info_box:null,
      rank_two:null,
      rank_one:null,
      swiper_box:null

    }
  },
  beforeDestroy() {
    this.clearData();
  },
  mounted() {
    this.initCharts()

    // this.switper()
    // this.initSwiperRankOne()
    // this.initSwiperRankTwo()
    // this.initSwiperWarn()
    // this.initCharts1()
    // this.initCharts2()
    // this.initCharts3()
    // this.initCharts4()
    // this.initCharts5()
    // this.initCharts6()
  },

  methods: {
    initCharts() {
      this.myChart1 = echarts.init(this.$refs.charts1)
      this.myChart2 = echarts.init(this.$refs.charts2)
      this.myChart3 = echarts.init(this.$refs.charts3)
      this.myChart4 = echarts.init(this.$refs.charts4)
      this.myChart5 = echarts.init(this.$refs.charts5)
      this.myChart6 = echarts.init(this.$refs.charts6)

      this.getData()
      this.switper()
    },
    /**
    * 获取数据
    */
    async getData() {
      var that = this;
      await api.getINCloud({}).then(({ data }) => {
        if (data.code == 200) {
          console.log("INCloud", data);
          that.pageResult = data.result
          that.setData(data.result);
        }
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = () => {
        this.getData();
        // this.getMock()
      };
      this.timer = setInterval(
        looper,
        this.$store.state.echartsAutoTime
      );

    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    setData(result) {
      var that = this;
      //资源池列表
      if (result.resourcePool) {
        that.$nextTick(() => {
          that.initSwiper()
        })
      }
      //CUP和资源使用率
      if (result.cpu) {
        that.initCharts1(result.cpu)
      }
      if (result.ram) {
        that.initCharts2(result.ram)
      }
      //资源使用率
      if (result.useratio) {
        that.resourceData = result.useratio
        that.resourceData.useratioChart = result.useratioChart
      }
      //三个pie
      if (result.ratio) {
        var connected = result.ratio.connected
        connected = connected.substring(0, connected.length - 1)
        var health = result.ratio.health
        health = health.substring(0, health.length - 1)
        var online = result.ratio.online
        online = online.substring(0, online.length - 1)

        that.initCharts3(online)
        that.initCharts4(health)
        that.initCharts5(connected)
      }
      if (result.useratioChart) {
        var xName = []
        var values1 = []
        result.useratioChart.forEach(element => {
          xName.push(element.name)
          values1.push(element.value)
        });

        that.initCharts6(xName, values1)
      }
      //实时告警信息
      if (result.altermsg) {
        that.$nextTick(() => {
          that.initSwiperWarn()
        })
      }
      //CPU使用率TOP10
      if (result.cpuTop) {
        that.cpuTop = result.cpuTop
        that.$nextTick(() => {
          that.initSwiperRankOne()
        })
      }
      //ram使用率TOP10
      if (result.ramTop) {
        that.ramTop = result.ramTop

        that.$nextTick(() => {
          that.initSwiperRankTwo()

        })
      }



    },
    initSwiper() {
      if(!this.swiper_box)
      this.swiper_box = new Swiper(".swiper_box", {
        slidesPerView: '17',
        loop: true, // 循环模式选项
        direction: 'vertical', // 垂直切换选项
        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        },//可选选项，自动滑动
        spaceBetween: 0,
        ovserver: true,
        ovserverParents: true
      })
    },
    initSwiperRankOne() {
      if(!this.rank_one)
      this.rank_one = new Swiper(".rank_one", {
        slidesPerView: '9',
        loop: true, // 循环模式选项
        direction: 'vertical', // 垂直切换选项
        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        },//可选选项，自动滑动
        spaceBetween: 0,
        ovserver: true,
        ovserverParents: true
      })
    },
    initSwiperRankTwo() {
      if(!this.rank_two)
      this.rank_two = new Swiper(".rank_two", {
        slidesPerView: '9',
        loop: true, // 循环模式选项
        direction: 'vertical', // 垂直切换选项
        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        },//可选选项，自动滑动
        spaceBetween: 0,
        ovserver: true,
        ovserverParents: true
      })
    },
    initSwiperWarn() {
      if(!this.warn_info_box)
      this.warn_info_box=  new Swiper(".warn_info_box", {
        slidesPerView: '6',
        loop: true, // 循环模式选项
        direction: 'vertical', // 垂直切换选项
        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        },//可选选项，自动滑动
        spaceBetween: 0,
        ovserver: true,
        ovserverParents: true
      })
    },
    initCharts1(cpu) {
      var myChart = this.myChart1
      // const dom = this.$refs.charts1
      // const myChart = echarts.init(dom)
      var colors = [
        '#67D0FF',
        '#009DFF',
        '#F0A953'
      ];
      let option = {
        // 鼠标悬浮的提示
        tooltip: {
          formatter: '统计数量 : {c}'
        },
        series: [
          {
            type: 'gauge',
            radius: '100%', // 边框的半径
            min: cpu.min, //最大值
            max: cpu.max, //最小值
            startAngle: 200, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: -20, //仪表盘结束角度
            splitNumber: 4, //仪表盘刻度的分割段数
            center: ['50%', '60%'],
            itemStyle: {
              color: '#000', //颜色
              shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色
              shadowBlur: 10, //图形阴影的模糊大小
              shadowOffsetX: 2, //阴影水平方向上的偏移距离
              shadowOffsetY: 2 //阴影垂直方向上的偏移距离
            },
            progress: {
              show: true, //是否显示进度条
              roundCap: false, //是否在两端显示成圆形
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0.8,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colors[2] // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: colors[1] // 50% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colors[0] // 75% 处的颜色
                    },
                  ],
                  global: false
                }
              }
            },
            pointer: {
              show: true, //是否显示指针
              offsetCenter: [0, '10%'],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FF4D4F' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F6A328' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            axisLine: {
              show: true, //是否显示仪表盘轴线
              roundCap: false, //是否在两端显示成圆形
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, '#1A587E']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            axisTick: {
              show: false, //是否显示刻度
              distance: -29,
              lineStyle: {
                color: '#fff', // 刻度线颜色
                width: 1 // 刻度线的粗细（这里设置为4像素）
              }
            },
            splitLine: {
              show: true, //是否显示分隔线
              distance: 1,
              lineStyle: {
                color: '#fff', // 刻度线颜色
                width: 1 // 刻度线的粗细（这里设置为4像素）
              }
            },
            axisLabel: {
              show: true, //是否显示标签
              distance: 10,
              color: '#fff', // 刻度标签颜色
              fontSize: 8 // 标签字体大小
            },
            data: [
              {
                value: cpu.value,
                name: 'CPU利用率'
              }
            ],
            anchor: {
              show: true,
              showAbove: true,
              size: 10,
              itemStyle: {
                borderWidth: 2
              }
            },
            title: {
              fontSize: 12,
              color: '#fff', // 进度数值的颜色
              offsetCenter: ['0%', '57%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '33%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      }
      myChart.setOption(option);
    },

    initCharts2(ram) {
      var myChart = this.myChart2
      // const dom = this.$refs.charts2
      // const myChart = echarts.init(dom)
      var colors = [
        '#67D0FF',
        '#009DFF',
        '#39C296'
      ];
      let option = {
        // 鼠标悬浮的提示
        tooltip: {
          formatter: '统计数量 : {c}'
        },
        series: [
          {
            type: 'gauge',
            radius: '100%', // 边框的半径
            min: ram.min, //最大值
            max: ram.max, //最小值
            startAngle: 200, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: -20, //仪表盘结束角度
            splitNumber: 4, //仪表盘刻度的分割段数
            center: ['50%', '60%'],
            itemStyle: {
              color: '#000', //颜色
              shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色
              shadowBlur: 10, //图形阴影的模糊大小
              shadowOffsetX: 2, //阴影水平方向上的偏移距离
              shadowOffsetY: 2 //阴影垂直方向上的偏移距离
            },
            progress: {
              show: true, //是否显示进度条
              roundCap: false, //是否在两端显示成圆形
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0.8,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colors[2] // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: colors[1] // 25% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colors[0] // 75% 处的颜色
                    },
                  ],
                  global: false
                }
              }
            },
            pointer: {
              show: true, //是否显示指针
              offsetCenter: [0, '10%'],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FF4D4F' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F6A328' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            axisLine: {
              show: true, //是否显示仪表盘轴线
              roundCap: false, //是否在两端显示成圆形
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, '#1A587E']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            axisTick: {
              show: false, //是否显示刻度
              distance: -29,
              lineStyle: {
                color: '#fff', // 刻度线颜色
                width: 1 // 刻度线的粗细（这里设置为4像素）
              }
            },
            splitLine: {
              show: true, //是否显示分隔线
              distance: 1,
              lineStyle: {
                color: '#fff', // 刻度线颜色
                width: 1 // 刻度线的粗细（这里设置为4像素）
              }
            },
            axisLabel: {
              show: true, //是否显示标签
              distance: 10,
              color: '#fff', // 刻度标签颜色
              fontSize: 8 // 标签字体大小
            },
            data: [
              {
                value: ram.value,
                name: '内存使用率'
              }
            ],
            anchor: {
              show: true,
              showAbove: true,
              size: 10,
              itemStyle: {
                borderWidth: 2
              }
            },
            title: {
              fontSize: 12,
              color: '#fff', // 进度数值的颜色
              offsetCenter: ['0%', '57%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '33%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      }
      myChart.setOption(option);
    },
    initCharts3(value) {
      var myChart = this.myChart3
      // const dom = this.$refs.charts3
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#FCD159'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: value, // 当前进度
                name: '使用率'
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts4(value) {
      var myChart = this.myChart4
      // const dom = this.$refs.charts4
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#DB4963'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: value, // 当前进度
                name: '使用率'
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts5(value) {
      var myChart = this.myChart5
      // const dom = this.$refs.charts5
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#9C31C2'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: value, // 当前进度
                name: '使用率'
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts6(xName, values1) {
      var myChart = this.myChart6
      // const dom = this.$refs.charts6
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',  // 鼠标悬浮时显示阴影效果
          },
        },
        grid: {
          left: '3%',
          top: '10%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: xName,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',  // X轴线颜色
            },
          },
          axisLabel: {
            color: '#FFFFFF',  // X轴标签颜色
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',  // Y轴线颜色
            },
          },
          axisLabel: {
            color: '#FFFFFF',  // Y轴标签颜色
          },
          splitLine: {
            show: true,  // 显示虚线背景
            lineStyle: {
              type: 'dashed',  // 设置为虚线
              color: '#AAAAAA',  // 虚线颜色
            },
          },
        },
        series: [
          {
            name: 'Series 2',
            type: 'bar',
            data: values1,
            itemStyle: {
              color: '#FFFCCF',  // 自定义柱子颜色（浅黄色）
            },
            barWidth: '30%',  // 柱子的宽度
          },
          // {
          //   name: 'Series 1',
          //   type: 'bar',
          //   data: [120, 200, 150, 80, 70, 110, 130, 160, 140, 100, 190, 160, 120, 100, 150, 200, 130, 170, 110, 120],
          //   itemStyle: {
          //     color: '#D84B65',  // 自定义柱子颜色（红色）
          //   },
          //   barWidth: '30%',  // 柱子的宽度
          // },
        ],
      };
      myChart.setOption(option);
    },



  }
}
</script>
<style scoped lang="scss">
.page_main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  .left_box {
    width: 33.2%;
    height: 100%;
    background: #022E51;
    border-radius: 10px 10px 0px 0px;

    .assets_box {
      width: 100%;
      height: 24px;
      display: flex;
      align-items: center;
      background: rgba(48, 190, 244, 0.1);

      .assets_list {
        flex: 1;
        font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
        font-weight: 400;
        font-size: 14px;
        color: #30BEF4;

      }
    }

    .swiper_box {
      height: calc(100% - 69px);
      width: 100%;
      overflow: hidden;

      // .swiper-wrapper{
      .swiper-wrapper {
        width: 100%;

        .info_box {
          display: flex;
          width: 100%;
          align-items: center;

          .info_list {
            width: calc((100% / 7) - 6px);
            font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
            font-weight: 400;
            padding: 0 3px;
            font-size: 14px;
            color: #30BEF4;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;

            &.warn {
              color: #DB4963;
            }

            &.normal {
              color: #10B27E;
            }
          }
        }
      }
    }
  }

  .center_box {
    width: 30.84%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .use_rate_box {
      width: 100%;
      display: flex;
      height: 21.65%;
      align-items: center;
      justify-content: center;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .use_charts {
        width: 50%;
        height: 100%;
      }
    }

    .circle_box {
      width: 100%;
      height: 18.18%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      align-items: center;

      .circle_item {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .circle {
          width: 100%;
          flex: 1;
        }

        .value {
          padding-bottom: 10px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #30BEF4;
        }
      }
    }

    .assets_use_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 54.55%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .info_box {
        height: calc((100% - 45px)/4);
        width: 100%;
        display: flex;
        align-items: center;

        .info {
          height: 100%;
          flex: 1;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;

          .label {
            font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
            font-weight: 400;
            font-size: 14px;
            color: #1A9ACB;
            margin-bottom: 10px;
          }

          .value {
            font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
            font-weight: 400;
            font-size: 16px;
            color: #30BEF4;
            position: relative;

            .rate {
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 12px;
              color: #10B27E;
              position: absolute;
              margin: auto;
              left: 0;
              right: 0;
            }
          }
        }

        .line {
          width: 1px;
          height: 35%;
          background: #003F5A;
        }
      }

      .config_box {
        height: calc((100% - 45px) * 0.4);
        width: 100%;
        display: flex;
        align-items: center;

        .config_list {
          width: 50%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: flex-start;

          .list {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;

            .icon {
              width: 3px;
              border-radius: 50%;
              height: 3px;
              border: 3px solid #52BAE8;
              margin-left: 15px;
            }

            .label {
              width: 70%;
              text-align: left;
              margin-left: 5px;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 14px;
              color: #fff;
            }

            .value {
              text-align: right;
              margin-right: 10px;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 14px;
              color: #10B27E;

              &.warn {
                color: #DB4963;
              }
            }
          }
        }
      }

      .charts {
        flex: 1;
        width: 100%;
      }
    }
  }

  .right_box {
    width: 33.2%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .ranking_box {
      height: 54.55%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .rank_list {
        width: 49.5%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #022E51;
        align-items: center;

        &.l {
          border-radius: 10px 0px 0px 0px;
        }

        &.r {
          border-radius: 0px 10px 0px 0px;
        }

        .rank_swiper {
          height: calc(100% - 55px);
          width: 100%;
          overflow: hidden;

          // .swiper-wrapper{
          .swiper-wrapper {
            width: 100%;

            .list {
              width: 90%;
              margin: auto;
              height: 38px;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .label {
                width: 20%;
                text-align: right;
                font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
                font-weight: 400;
                font-size: 12px;
                color: #1A9ACB;
              }

              .value {
                width: 70%;
                height: 10px;
                border-radius: 5px;
                background: #0A3C60;

                .progess {
                  border-radius: 5px;
                  height: 10px;

                  &.c0 {
                    background: #009DFF;
                  }

                  &.c1 {
                    background: #0268E4;
                  }

                  &.c2 {
                    background: #67D0FF;
                  }

                  &.c3 {
                    background: #9FE6B8;
                  }

                  &.c4 {
                    background: #D8B183;
                  }

                  &.c5 {
                    background: #FF9F7F;
                  }

                  &.c6 {
                    background: #FB7293;
                  }

                  &.c7 {
                    background: #E88EC0;
                  }

                  &.c8 {
                    background: #5F42A8;
                  }

                  &.c9 {
                    background: #37A2DA;
                  }

                  &.c10 {
                    background: #32C5E9;
                  }
                }
              }
            }
          }
        }
      }
    }

    .real_warn_box {
      width: 100%;
      height: 42.64%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .warn_box {
        width: 100%;
        height: 24px;
        display: flex;
        align-items: center;
        background: rgba(48, 190, 244, 0.1);

        .warn_list {
          flex: 1;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 14px;
          color: #30BEF4;
        }
      }

      .warn_info_box {
        height: calc(100% - 69px);
        width: 100%;
        overflow: hidden;

        // .swiper-wrapper{
        .swiper-wrapper {
          width: 100%;

          .info_box {
            display: flex;
            width: 100%;
            align-items: center;

            .info_list {
              width: calc(100% / 7);
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 14px;
              color: #30BEF4;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 12px;
              color: #FFFFFF;

              &.warn {
                color: #DB4963;
              }

              &.normal {
                color: #10B27E;
              }
            }
          }
        }
      }
    }
  }
}

.box_title {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #003F5A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
  font-weight: 400;
  font-size: 18px;
  box-sizing: border-box;
  color: #1A9ACB;
}
</style>